<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
    <style>
        table {
            border: 1px solid #e9e9e9;
            border-collapse: collapse;
            border-spacing: 0;
        }
        td,th{
            padding : 8px 16px;
            border: 1px solid #e9e9e9;
            text-align: left;
        }
        th {
            background-color: #f7f7f7;
            color: #5c6b77;
            font-weight: 600;
        }
    </style>
</head>
<body>
<div>
    <!-- 双向绑定问题
        在vue中常常用v-model 在 <input> <textarea> <select> 元素上创建双向绑定
        根据控件类型自动地更新元素，本质上就是语法糖，负责监听用户的输入事件 以更新元素
    -->
    <h1>第一题</h1>
    <div id="t1">
        <input type="text" v-model="message" placeholder="来写点东西吧~"><br>
        <div style="color:red" >在这里显示输入框的内容：{{message}}</div>
    </div>

    <!-- v-for遍历问题
        v-for 指令基于一个数组来渲染一个列表。
        v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，
        而 item 则是被迭代的数组元素的别名。
        key 的目的是为了更高性能的DOM
    -->
    <h1>第二题</h1>
    <div id="t2">
        <table>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>成绩</th>
            </tr>
            <tr v-for=" (item , index) in students" :key="index">
                <td v-for="i in item">{{i}}</td>
            </tr>
        </table>
    </div>

    <!-- v-on指令问题
        用 v-on 指令监听DOM事件
    -->
    <h1>第三题</h1>
    <div id="t3">
        点击下方按钮，实现数据增加或减少：<br>
        <button @click="num++">+</button>
        <div>{{num}}</div>
        <button @click="num--">-</button><br>
    </div>

    <!-- v-if指令问题
        使用v-if判断组件是否使用
        利用语法糖@绑定按钮 当按钮被点击切换显示与否
        利用watch() 控制 按钮中文字
    -->
    <h1>第四题</h1>
    <div id="t4">
        <div v-show="flag">
            点击下方按钮，实现显示内容的隐藏和显示：
        </div>
        <button @click="flag = !flag;">{{text}}内容</button><br>
    </div>


    <h1>第五题</h1>
    <div id="t5">
        设计一个猜数字游戏：<br>
        <input type="text" placeholder="来猜猜吧~" v-model="num">
        <div>{{message}}</div>
        <button @click="guess">猜一猜</button>
        <button @click="change" style="margin-left: 10px ">重新开始</button><br>
    </div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    let t1 = new Vue ({
        el:'#t1',
        data: {
            message:'',
        },
    })

    let t2 = new Vue ({
        el:'#t2',
        data:{
            students:[
                {no:1, name:"张三", sex:"男" , grade: "100"},
                {no:2, name:"李四", sex:"男" , grade: "100"},
                {no:3, name:"王五", sex:"男" , grade: "100"},
                {no:4, name:"赵六", sex:"男" , grade: "100"},
                {no:5, name:"钱七", sex:"男" , grade: "100"},
                {no:6, name:"孙八", sex:"男" , grade: "100"},
            ]
        }
    })

    let t3 = new Vue ({
        el:'#t3',
        data:{
            num: 0
        }
    })

    let t4 = new Vue ({
        el:'#t4',
        data:{
            flag: true,
            text:'隐藏'
        },
        watch: {
            flag() {
                if (this.flag === true) return this.text = '隐藏'
                else return this.text = '显示'
            }
        }
    })

    let t5 = new Vue ({
        el:'#t5',
        data:{
            num:'',
            key: Math.round(Math.random()*20),
            message:'猜猜人家是啥嘛~'
        },
        methods: {
            guess() {
                if (this.num == '') return this.message = '你都不输入！！！';
                if (this.num == this.key) {
                    return this.message = '回答正确，你真厉害呀';
                }
                else if (this.num > this.key) return this.message = '猜大了，你个菜鸡'
                else if (this.num < this.key) return this.message = '猜小了，你个菜鸡'
            },
            change() {
                this.key = Math.round(Math.random()*20);
                this.message = '猜猜人家是啥嘛~';
                this.num = ''
            }
        }
    })

</script>
</html>
